<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Date对象</title>
    <link rel="shortcut icon" href="../../../../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../../css/datatype.css ">
</head>

<body>
    <div id="nav">
        <ul>
            <li><a href="./math.html">Math</a></li>
            <li><a href="./string.html">String</a></li>
            <li><a href="./object.html">Object</a></li>
            <li><a href="./array.html">Array</a></li>
            <li><a href="./date.html">Date</a></li>
        </ul>
        <div id="back">
            <a href="../../index.html">返回首页</a>
        </div>
    </div>
    <div class="container">
        <ul class="date">
            <li>当变更任何一个select选择时，更新 result-wrapper 的内容</li>
            <li>当所选时间早于现在时间时，文案为 现在距离 "所选时间" 已经过去 xxxx</li>
            <li>当所选时间晚于现在时间时，文案为 现在距离 "所选时间" 还有 xxxx</li>
            <li>注意当前时间经过所选时间时候的文案变化</li>
            <li>注意选择不同月份的时候，日期的可选范围不一样，比如1月可以选31天，11月只有30天，注意闰年</li>
            <li>同样，需要注意，通过优雅的函数封装，使得代码更加可读且可维护</li>
        </ul>
        <select id="year-select"></select>
        <select id="month-select"></select>
        <select id="day-select"></select>
        <select id="hour-select"></select>
        <select id="minite-select"></select>
        <select id="second-select"></select>

        <p id="result-wrapper">现在距离 2001 年 1 月 1 日 星期X HH : MM : SS 还有 X 天 X 小时 X 分 X 秒</p>
    </div>
    <script src="../../js/date.js"></script>
</body>

</html>